<template>
	<view class="exam-detail-page">
		<!-- 导航栏 -->
		<uv-navbar title="答题详情" :border="true" :fixed="true" placeholder>
			<template #left>
				<uv-icon name="arrow-left" size="20" @click="goBack"></uv-icon>
			</template>
		</uv-navbar>

		<view v-if="loading" class="loading-container">
			<uv-loading-icon mode="flower"></uv-loading-icon>
			<text class="loading-text">加载中...</text>
		</view>

		<view v-else-if="examDetail" class="detail-content">
			<!-- 考试基本信息 -->
			<view class="exam-info-card">
				<view class="card-header">
					<text class="card-title">考试信息</text>
					<view class="status-badge" :class="getStatusClass(examDetail.status)">
						{{ getStatusText(examDetail.status) }}
					</view>
				</view>
				
				<view class="info-list">
					<view class="info-item">
						<text class="label">考试标题</text>
						<text class="value">{{ examDetail.examTitle }}</text>
					</view>
					<view class="info-item">
						<text class="label">用户昵称</text>
						<text class="value">{{ examDetail.nickName }}</text>
					</view>
					<view class="info-item">
						<text class="label">开始时间</text>
						<text class="value">{{ formatTime(examDetail.startTime) }}</text>
					</view>
					<view class="info-item" v-if="examDetail.submitTime">
						<text class="label">提交时间</text>
						<text class="value">{{ formatTime(examDetail.submitTime) }}</text>
					</view>
					<view class="info-item">
						<text class="label">考试时长</text>
						<text class="value">{{ examDetail.duration }}分钟</text>
					</view>
				</view>
			</view>

			<!-- 成绩统计 -->
			<view class="score-card">
				<view class="card-header">
					<text class="card-title">成绩统计</text>
				</view>
				
				<view class="score-overview">
					<view class="score-main">
						<text class="score-number">{{ examDetail.score || 0 }}</text>
						<text class="score-total">/ {{ examDetail.totalScore }}</text>
					</view>
					<view class="score-rate">
						<text class="rate-text">得分率: {{ getScoreRate(examDetail) }}%</text>
					</view>
				</view>
				
				<view class="stats-grid">
					<view class="stat-item">
						<text class="stat-number">{{ examDetail.totalQuestions }}</text>
						<text class="stat-label">总题数</text>
					</view>
					<view class="stat-item">
						<text class="stat-number correct">{{ examDetail.correctCount || 0 }}</text>
						<text class="stat-label">答对</text>
					</view>
					<view class="stat-item">
						<text class="stat-number wrong">{{ (examDetail.totalQuestions || 0) - (examDetail.correctCount || 0) }}</text>
						<text class="stat-label">答错</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ formatDuration(examDetail.totalTime) }}</text>
						<text class="stat-label">用时</text>
					</view>
				</view>
				
				<!-- 及格线 -->
				<view class="pass-line" v-if="examDetail.passScore">
					<view class="pass-info">
						<text class="pass-text">及格分数: {{ examDetail.passScore }}分</text>
						<text class="pass-result" :class="examDetail.score >= examDetail.passScore ? 'pass' : 'fail'">
							{{ examDetail.score >= examDetail.passScore ? '已及格' : '未及格' }}
						</text>
					</view>
					<view class="pass-bar">
						<view class="pass-progress" :style="{ width: getPassProgress(examDetail) + '%' }"></view>
						<view class="pass-mark" :style="{ left: (examDetail.passScore / examDetail.totalScore * 100) + '%' }"></view>
					</view>
				</view>
			</view>

			<!-- 题目详情 -->
			<view class="questions-card" v-if="examDetail.questions && examDetail.questions.length > 0">
				<view class="card-header">
					<text class="card-title">题目详情</text>
					<text class="question-count">共{{ examDetail.questions.length }}题</text>
				</view>
				
				<view class="questions-list">
					<view 
						v-for="(question, index) in examDetail.questions" 
						:key="question.questionId"
						class="question-item"
						@click="toggleQuestion(index)"
					>
						<view class="question-header">
							<view class="question-number">
								<text class="number">{{ index + 1 }}</text>
								<view class="result-icon" :class="question.isCorrect ? 'correct' : 'wrong'">
									<uv-icon :name="question.isCorrect ? 'checkmark' : 'close'" size="16" color="#fff"></uv-icon>
								</view>
							</view>
							<view class="question-info">
								<text class="question-type">{{ getQuestionTypeText(question.questionType) }}</text>
								<text class="question-score">{{ question.score }}分</text>
							</view>
							<uv-icon 
								:name="expandedQuestions.includes(index) ? 'arrow-up' : 'arrow-down'" 
								size="16" 
								color="#999"
							></uv-icon>
						</view>
						
						<view v-if="expandedQuestions.includes(index)" class="question-content">
							<view class="question-title">
								<PraseContent v-if="question.title" :contents="question.title"></PraseContent>
							</view>
							
							<view v-if="question.userAnswer" class="answer-section">
								<view class="answer-item">
									<text class="answer-label">您的答案:</text>
									<text class="answer-content user-answer">{{ question.userAnswer.answerContent || '未作答' }}</text>
								</view>
								<view class="answer-item" v-if="question.correctAnswer">
									<text class="answer-label">正确答案:</text>
									<text class="answer-content correct-answer">{{ question.correctAnswer }}</text>
								</view>
								<view class="answer-item" v-if="question.userAnswer.stayTime">
									<text class="answer-label">答题用时:</text>
									<text class="answer-content">{{ formatDuration(question.userAnswer.stayTime) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else class="empty-container">
			<uv-empty mode="data" text="暂无数据"></uv-empty>
		</view>
	</view>
</template>

<script>
import PraseContent from '@/components/topic/PraseContent.vue'

export default {
	name: 'ExamDetail',
	components: {
		PraseContent
	},
	data() {
		return {
			userExamId: null,
			examDetail: null,
			loading: false,
			expandedQuestions: [] // 展开的题目索引
		}
	},
	onLoad(options) {
		if (options.userExamId) {
			this.userExamId = options.userExamId;
			this.loadExamDetail();
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 加载考试详情
		async loadExamDetail() {
			if (!this.userExamId) return;
			
			this.loading = true;
			
			try {
				const res = await this.$api('getUserExamRecordDetail', {
					userExamId: this.userExamId
				});
				
				if (res.code === 200) {
					this.examDetail = res.data;
				} else {
					uni.showToast({
						title: res.msg || '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载考试详情失败:', error);
				uni.showToast({
					title: '网络错误',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 切换题目展开状态
		toggleQuestion(index) {
			const expandedIndex = this.expandedQuestions.indexOf(index);
			if (expandedIndex > -1) {
				this.expandedQuestions.splice(expandedIndex, 1);
			} else {
				this.expandedQuestions.push(index);
			}
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const classMap = {
				'not_started': 'status-not-started',
				'in_progress': 'status-in-progress',
				'completed': 'status-completed',
				'graded': 'status-graded'
			};
			return classMap[status] || 'status-default';
		},
		
		// 获取状态文本
		getStatusText(status) {
			const textMap = {
				'not_started': '未开始',
				'in_progress': '进行中',
				'completed': '已完成',
				'graded': '已评分'
			};
			return textMap[status] || '未知';
		},
		
		// 获取题目类型文本
		getQuestionTypeText(type) {
			const typeMap = {
				'single_choice': '单选题',
				'multiple_choice': '多选题',
				'true_false': '判断题',
				'fill_blank': '填空题',
			};
			return typeMap[type] || '未知题型';
		},
		
		// 格式化时间
		formatTime(time) {
			if (!time) return '-';
			return this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss');
		},
		
		// 格式化时长
		formatDuration(seconds) {
			if (!seconds) return '0分钟';
			
			const hours = Math.floor(seconds / 3600);
			const minutes = Math.floor((seconds % 3600) / 60);
			const secs = seconds % 60;
			
			if (hours > 0) {
				return `${hours}小时${minutes}分钟`;
			} else if (minutes > 0) {
				return `${minutes}分${secs}秒`;
			} else {
				return `${secs}秒`;
			}
		},
		
		// 计算得分率
		getScoreRate(record) {
			if (!record.totalScore || record.totalScore === 0) {
				return 0;
			}
			return Math.round((record.score / record.totalScore) * 100);
		},
		
		// 计算及格进度
		getPassProgress(record) {
			if (!record.totalScore || record.totalScore === 0) {
				return 0;
			}
			return Math.min((record.score / record.totalScore) * 100, 100);
		}
	}
}
</script>

<style lang="scss" scoped>
.exam-detail-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
	
	.loading-text {
		margin-top: 20rpx;
		color: #999;
		font-size: 28rpx;
	}
}

.empty-container {
	padding: 200rpx 0;
}

.detail-content {
	padding: 20rpx;
}

.exam-info-card,
.score-card,
.questions-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	
	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
	
	.question-count {
		font-size: 28rpx;
		color: #666;
	}
	
	.status-badge {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #fff;
		
		&.status-not-started {
			background-color: #909399;
		}
		
		&.status-in-progress {
			background-color: #E6A23C;
		}
		
		&.status-completed {
			background-color: #67C23A;
		}
		
		&.status-graded {
			background-color: #409EFF;
		}
		
		&.status-default {
			background-color: #909399;
		}
	}
}

.info-list {
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.label {
			font-size: 28rpx;
			color: #666;
			width: 160rpx;
		}
		
		.value {
			font-size: 28rpx;
			color: #333;
			flex: 1;
			text-align: right;
		}
	}
}

.score-overview {
	text-align: center;
	margin-bottom: 40rpx;
	
	.score-main {
		margin-bottom: 10rpx;
		
		.score-number {
			font-size: 80rpx;
			font-weight: 700;
			color: #E6A23C;
		}
		
		.score-total {
			font-size: 40rpx;
			color: #999;
		}
	}
	
	.score-rate {
		.rate-text {
			font-size: 28rpx;
			color: #666;
		}
	}
}

.stats-grid {
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;
	
	.stat-item {
		text-align: center;
		
		.stat-number {
			display: block;
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 8rpx;
			
			&.correct {
				color: #67C23A;
			}
			
			&.wrong {
				color: #F56C6C;
			}
		}
		
		.stat-label {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.pass-line {
	border-top: 1rpx solid #f0f0f0;
	padding-top: 30rpx;
	
	.pass-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.pass-text {
			font-size: 28rpx;
			color: #666;
		}
		
		.pass-result {
			font-size: 28rpx;
			font-weight: 600;
			
			&.pass {
				color: #67C23A;
			}
			
			&.fail {
				color: #F56C6C;
			}
		}
	}
	
	.pass-bar {
		position: relative;
		height: 8rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
		
		.pass-progress {
			height: 100%;
			background-color: #E6A23C;
			border-radius: 4rpx;
			transition: width 0.3s ease;
		}
		
		.pass-mark {
			position: absolute;
			top: -4rpx;
			width: 2rpx;
			height: 16rpx;
			background-color: #67C23A;
			transform: translateX(-50%);
		}
	}
}

.questions-list {
	.question-item {
		border: 1rpx solid #f0f0f0;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		
		.question-header {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: #fafafa;
			cursor: pointer;
			
			.question-number {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				
				.number {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40rpx;
					height: 40rpx;
					background-color: #409EFF;
					color: #fff;
					border-radius: 50%;
					font-size: 24rpx;
					font-weight: 600;
					margin-right: 10rpx;
				}
				
				.result-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					
					&.correct {
						background-color: #67C23A;
					}
					
					&.wrong {
						background-color: #F56C6C;
					}
				}
			}
			
			.question-info {
				flex: 1;
				
				.question-type {
					display: block;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 4rpx;
				}
				
				.question-score {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		
		.question-content {
			padding: 20rpx;
			
			.question-title {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				line-height: 1.6;
				color: #333;
			}
			
			.answer-section {
				border-top: 1rpx solid #f0f0f0;
				padding-top: 20rpx;
				
				.answer-item {
					display: flex;
					margin-bottom: 15rpx;
					
					.answer-label {
						font-size: 26rpx;
						color: #666;
						width: 140rpx;
						flex-shrink: 0;
					}
					
					.answer-content {
						font-size: 26rpx;
						flex: 1;
						
						&.user-answer {
							color: #333;
						}
						
						&.correct-answer {
							color: #67C23A;
							font-weight: 600;
						}
					}
				}
			}
		}
	}
}
</style>